<template>
  <div style="width: 100%;height: 100%;overflow: hidden;">

    <div style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow: auto;" class="_wz_pcliveList">
      <div style="position: relative;width: 100%;height: 100%;">
<!--        <div style="position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 99;height:100%;" @click="$toast('活动未开始，敬请期待！！');"></div>-->

        <div class="_wz_pcliveList_conent">
          <img src="../../assets1/er/pc/homeTop.png" style="width: 100%;">
          <van-row style="padding: 0px 50px 0;">
            <van-col span="6" style="padding: 25px 50px 0;">
              <template v-for="item,index in 1">
                <img class="pc_hy-img"  :src="ztList[index].img" @click="enter('pclive',ztList[index].type)" style="margin: 0 0 10px 0;"/>
              </template>

<!--              <img class="pc_hy-img" src="../../assets1/er/pc/live1.png" @click="enter('know')"/>-->
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-27-9-12.png"  style="width: 60%;margin: 39px 0 25px;"/>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 1].img" @click="enter('pclive',ztList[index + 1 ].type)" style="margin: 0 0 10px 0;"/>
                </template>
              </div>
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-27-13-17.png"  style="width: 60%;margin: 39px 0 25px;"/>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 2].img" @click="enter('pclive',ztList[index + 2].type)" style="margin: 0 0 10px 0;"/>
                </template>
              </div>
            </van-col>
            <van-col span="6" style="padding: 0 50px;">
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-27-14-17.png"  style="width: 60%;margin: 0px 0 20px;"/>
                <template v-for="item,index in 2">
                  <img class="pc_hy-img"  :src="ztList[index + 3].img" @click="enter('pclive',ztList[index + 3].type)" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 2">
                  <img class="pc_hy-img"  :src="ztList[index + 5].img" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 7].img" @click="enter('pclive',ztList[index + 7].type)" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 8].img" style="margin: 0 0 17px 0;"/>
                </template>
              </div>
            </van-col>
            <van-col span="6" style="padding: 0 50px;">
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-27-14-17.png"  style="width: 60%;margin: 0px 0 20px;"/>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 9].img" @click="enter('pclive',ztList[index + 9].type)" style="margin: 0 0 4px 0;"/>
                </template>
                <template v-for="item,index in 4">
                  <img class="pc_hy-img"  :src="ztList[index + 10].img" style="margin: 0 0 4px 0;"/>
                </template>
              </div>
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-27-19-21.png"  style="width: 60%;margin: 27px 0 20px;"/>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 14].img" style="margin: 0 0 10px 0;"/>
                </template>
              </div>
            </van-col>
            <van-col span="6" style="padding: 0 50px;">
              <div>
                <img class="pc_hy-img" src="../../assets1/er/pc/5-28-8-12.png"  style="width: 60%;margin: 0px 0 20px;"/>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 15].img" @click="enter('pclive',ztList[index + 15].type)" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 16].img" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 17].img" @click="enter('pclive',ztList[index + 17].type)" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 18].img" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 19].img"  @click="enter('pclive',ztList[index + 19].type)" style="margin: 0 0 17px 0;"/>
                </template>
                <template v-for="item,index in 1">
                  <img class="pc_hy-img"  :src="ztList[index + 20].img" style="margin: 0 0 17px 0;"/>
                </template>
              </div>
            </van-col>

          </van-row>
<!--          <div v-if="!!userData.userId" class="_wz_pc_ljsc">-->
<!--            <div style="line-height: 0.5rem;font-size: 0.2rem;font-weight: 900;">{{userData.name}}</div>-->
<!--            <div style="font-size: 14px;line-height: 0.3rem;">累计学习时长：<span style="color: rgb(255, 0, 0);font-size: 0.15rem;padding: 0px 0.05rem;">{{userData.minute}}</span>分</div>-->
<!--          </div>-->
        </div>
      </div>

    </div>
    <peoplePopup ref="peoplePopup" @checkUser="checkUser"></peoplePopup>

    <returnIndex :isPhone="$store.state.isMobile"></returnIndex>
  </div>
</template>
<script>
import peoplePopup from "@/components/peoplePopup.vue";
import wxApi from "@/utils/wxapi.js";
import returnIndex from "@/components/return";
export default {
  components: {
    peoplePopup,
    returnIndex,//返回首页
  },
  data() {
    return {
      userData:{},
      // userData:!!localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {},
      mettingList: [],
      ztList: [//论坛列表 2 8 15  16 17 22

        {type: '1660615598539018241', img: require("../../assets1/er/pc/live1.png")},//
        {type: '1660615598539018241', img: require("../../assets1/er/pc/live2.png")},//
        {type: '1660615797369999362', img: require("../../assets1/er/pc/live3.png")},//

        {type: '1660616134180999170', img: require("../../assets1/er/pc/live4-1.png")},//
        {type: '1660616355984183298', img: require("../../assets1/er/pc/live4-2.png")},//
        {type: 6, img: require("../../assets1/er/pc/live4-3.png")},//
        {type: 7, img: require("../../assets1/er/pc/live4-4.png")},//
        {type: '1660616552315359233', img: require("../../assets1/er/pc/live4-5.png")},//
        {type: 9, img: require("../../assets1/er/pc/live4-6.png")},//


        {type: '1660616885724778498', img: require("../../assets1/er/pc/live5-1.png")},//
        {type: 5, img: require("../../assets1/er/pc/live5-2.png")},//
        {type: 6, img: require("../../assets1/er/pc/live5-3.png")},//
        {type: 7, img: require("../../assets1/er/pc/live5-4.png")},//
        {type: 8, img: require("../../assets1/er/pc/live5-5.png")},//


        // {type: 4, img: require("../../assets1/er/pc/live6-1.png")},//
        {type: 5, img: require("../../assets1/er/pc/live6-2.png")},//

        {type: '1660922763292184578', img: require("../../assets1/er/pc/live7-1.png")},//
        {type: 5, img: require("../../assets1/er/pc/live7-2.png")},//
        {type: "1660617126024843265", img: require("../../assets1/er/pc/live7-3.png")},//
        {type: 7, img: require("../../assets1/er/pc/live7-4.png")},//
        {type: '1660617398348419073', img: require("../../assets1/er/pc/live7-5.png")},//
        {type: 9, img: require("../../assets1/er/pc/live7-6.png")},//

      ],
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    wxApi("", "", "https://prod.sumaokeji.com/h5/meeting/#/");

    //TODO
    // localStorage.clear();
    //判断用户是否登录
    if (!localStorage.getItem("userId")) {
      that.$refs.peoplePopup.open(that.$store.state.isMobile);
    } else {
      that.checkUser();
    }

    that.resize();
    window.addEventListener('resize', () => {
      that.resize();
    }, false)
  },
  methods: {//执行的方法
    enter(flag, type) {
      let that = this;
      if (flag == "pclive") {
        that.pushPage(`${flag}`, { type: type });
      } else {
        that.pushPage(`${flag}`);
      }
    },
    //检验用户是否过期
    checkUser() {
      let that = this;
      that.$toast.loading({message: "加载中...", forbidClick: true});
      that.http.checkUserId({userId: localStorage.getItem("userId")}).then(res => {
        that.$toast.clear();
        if (res.status == 1103) {
          that.$refs.peoplePopup.open(that.$store.state.isMobile);
          // that.$that.$toast("登录已过期，请重新登录");
        }else{
          if (res.status == 1000) {
            if(!!res.data){
              localStorage.setItem("userId", res.data.userId);
              localStorage.setItem("userData", JSON.stringify(res.data));
              that.userData = res.data;
            }else{
              that.userData = {};
              that.$refs.peoplePopup.open(that.$store.state.isMobile);
              that.clearCache()
            }
          }
        }
      }).catch(err => {
        that.$toast.clear();
      });
    },
    clearCache(){
      localStorage.clear();
    },
    resize() {
      // PC 端首页
      if(document.getElementsByClassName('_wz_pcliveList').length > 0){
        console.log('PC 端首页')
        var s = window.innerWidth / 1920;
        localStorage.setItem('multiple',s.toString())
        // document.body.style.zoom = s;//1 - s + 1;
        var home = document.getElementsByClassName('_wz_pcliveList')[0]
        home.style.transformOrigin = '0 0';
        home.style.transform = 'scale(' + s + ',' + s + ')';
        home.style.width = window.innerWidth / s + 'px';
        home.style.height = window.innerHeight / s + 'px';
      }
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="scss">
._wz_pcliveList_conent {
  background-image: url(../../assets1/er/pc/homeBack.png);

  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  overflow: auto;

  //padding: 110px 0 180px;

  .pc_hy-img {
    // margin-left: 0.1rem;
    cursor: pointer;
    width: 100%;
  }
  .pc_bg-img {
    // width: 1200px;
    margin: 0 150px;
  }

  ._wz_12-1-bac{
    background-image: url(../../assets1/pc/12-1-bac.png);
    background-size: 100% 100%;
    padding: 10px;
  }


  ._wz_pc_ljsc{
    position: absolute;
    right: 0px;
    background: url("../../assets1/sc.png") no-repeat;
    background-size: 100% 100%;
    padding:0 0.3rem 0.2rem;
    top: 0px;
  }
}
</style>
